<template>
  <div class="tabs-box">
    <div class="tabs">
      <div v-for="item in list" :key="item.r" :class="{ active: tab === item.r }" @click="handleClickTab(item.r)">
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useGameStore } from '@/stores/game'
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// import { useAppStore } from '@/stores/app'
import { useInvestStore } from '@/stores/invest'
import { lotteryWebsite } from '@/config/lottery-website'

const list = [
  {
    label: '投注区',
    r: 'bet',
  },
  {
    label: '路单图',
    r: 'road',
  },
  {
    label: '游戏记录',
    r: 'record',
  },
  {
    label: '游戏规则',
    r: 'rules',
  },
  {
    label: '开奖验证',
    r: 'verify',
  },
]
// const website = ref('')

const route = useRoute()

const p = route.path.split('/').at(-1)

const tab = ref(p)

const router = useRouter()

const gameStore = useGameStore()

const currentGame = computed(() => gameStore.currentGame)
// const appStore = useAppStore()

const investStore = useInvestStore()

watch(
  () => route.path,
  (n) => {
    if (!n) return
    tab.value = n.split('/').at(-1)
  },
)

const handleClickTab = (v) => {
  if (v === 'rules') return investStore.showRulesPopup(true)
  if (v === 'verify') return openChainUrl()
  tab.value = v
  const url = `/game/${gameStore.currentGame.toLowerCase()}/${v}`
  router.push(url)
}
const openChainUrl = () => {
  const website = lotteryWebsite[currentGame.value]
  if (!website) return
  window.open(`//${website}`)
}
</script>

<style lang="less" scoped>
.tabs {
  display: flex;
  height: 28px;
  align-items: center;

  > div {
    height: 24px;
    line-height: 24px;
    padding: 0 9px;
    color: rgba(119, 112, 159, 1);
    background: linear-gradient(160.16deg, #fcfdff -0.56%, #e5eeff 98.05%);
    box-shadow: 0 1px 0 0 rgba(159, 193, 234, 1);
    border-radius: 5px;
    margin-right: 9px;

    &.active {
      background: linear-gradient(182.69deg, #9a9eff -11.69%, #644bff 74.43%, #9281ff 107.71%);
      box-shadow: 0 1px 0 0 rgba(100, 34, 228, 1);
      color: #fff;
    }
  }
}

.tabs-box {
  position: relative;
}
</style>
